<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--edge浏览器-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="styles/icon.css" />
    <link rel="stylesheet" href="styles/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="page">
      <!--导航条-->
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active">
              <img src="imgs/icon_article.webp" class="place-img" /><span
                >好文精选</span
              >
            </li>
            <li class="tab-item"><img src="imgs/icon_hot.webp" />热门资讯</li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">文章</li>
            <li class="cat-item">游戏</li>
          </ul>
        </nav>
      </header>

      <main class="list">
        <a herf="#" class="sku">
          <div class="content">
            <div class="cover">
              <img class="cover-img" src="imgs/rtop1.png" />
              <img class="cover-rank" src="imgs/rank-top1.png" />
            </div>
          </div>
          <div class="desc">
            <span class="source"></span>
            <i class="iconfont icon-comment"></i>
            <span class="desc-number">98</span>
            <i class="iconfont icon-zhi"></i>
            <span class="desc-number">23%</span>
          </div>

          <div class="comment">
            <strong
              >画面通过石块构成的洞口，展现出充满像素风格的世界。洞外，蓝天澄澈，水域湛蓝，岸边绿草如茵、树木葱郁，还有错落有致的建筑，整体营造出一种静谧又充满生机的氛围，尽显美学与奇幻感。</strong
            >
          </div>
        </a>

        <a herf="#" class="sku">
          <div class="content">
            <div class="cover">
              <img class="cover-img" src="imgs/rtop2.png" />
              <img class="cover-rank" src="imgs/rank-top2.png" />
            </div>
          </div>
          <div class="desc">
            <span class="source"></span>
            <i class="iconfont icon-comment"></i>
            <span class="desc-number">98</span>
            <i class="iconfont icon-zhi"></i>
            <span class="desc-number">23%</span>
          </div>
          <div class="comment">
            <strong
              >黑色部分是芯片的封装外壳，能保护内部的芯片核心。外壳四周细密的引脚，用于实现芯片与电路板之间的电气连接，使芯片能与电路板上其他电子元件协同工作
              ，常见于计算机、手机、家电等各类电子设备中，承担着数据处理、存储、信号转换等多种功能。</strong
            >
          </div>
        </a>

        <a herf="#" class="sku">
          <div class="content">
            <div class="cover">
              <img class="cover-img" src="imgs/rtop3.png" />
              <img class="cover-rank" src="imgs/rank-top3.png" />
            </div>
          </div>
          <div class="desc">
            <span class="source"></span>
            <i class="iconfont icon-comment"></i>
            <span class="desc-number">98</span>
            <i class="iconfont icon-zhi"></i>
            <span class="desc-number">23%</span>
          </div>
          <div class="comment">
            <strong
              >《飞屋环游记》（外文名：Up）是由彼特·道格特、鲍勃·彼德森联合执导，由彼特·道格特、鲍勃·彼德森、汤姆·麦卡锡编剧，爱德华·阿斯纳、克里斯托弗·普卢默、乔丹·长井等配音，皮克斯动画工作室制作、迪士尼发行的动画电影，于2009年5月28日在俄罗斯首次上映，同年5月29日在美国正式上映，8月4日在中国大陆首映。</strong
            >
          </div>
        </a>
      </main>
    </div>
  </body>
</html>